<div class="wrapper">
  <?php $this->partial('Common/mainHeader');?>

  <?php $this->partial('Common/mainSiderbar');?>

  <div class="content-wrapper">
    <section class="content-header">
      <h1>推荐网络图</h1>
      <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-fw fa-home"></i> 首页</a></li>
        <li><a href="javascript:void(0);">会员网络</a></li>
        <li class="active">推荐网络图</li>
      </ol>
    </section>

    <div class="content">
      <div class="row">
        <div class="col-md-12 text-center">
          <form action="" method="get">会员编号：<input type="text" name="user_code"/><button type="submit">查询</button></form>
        </div>
        <div class="col-md-12">
          <div class="table-responsive" id="mountNode">
          </div>
        </div>
      </div>
    </div>
  </div>

  <?php $this->partial('Common/mainFooter');?>
</div>

<?php $this->partial('Common/mainScript');?>
<script type="text/javascript" charset="utf-8" src="/node_modules/@antv/g6/build/g6.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    G6.registerNode('rectangle', {
      draw: function(item) {
        var group = item.getGraphicGroup();
        var model = item.getModel();

        var lineAttrs = {
          x1: 0,
          y1: 25,
          x2: 90,
          y2: 25,
          stroke: '#019999'
        };
        group.addShape('line', {
          attrs: lineAttrs
        });
        lineAttrs.y1 *= 2;
        lineAttrs.y2 *= 2;
        group.addShape('line', {
          attrs: lineAttrs
        });
        lineAttrs.y1 *= 1.5;
        lineAttrs.y2 *= 1.5;
        group.addShape('line', {
          attrs: lineAttrs
        });

        group.addShape('text', {
          attrs: {
            x: 45,
            y: 20,
            text: model.account.user_code,
            fontFamily: 'Microsoft YaHei',
            fontSize: 12,
            textAlign: 'center',
            stroke: 'black'
          }
        });

        group.addShape('text', {
          attrs: {
            x: 45,
            y: 45,
            text: model.account.user_level,
            fontFamily: 'Microsoft YaHei',
            fontSize: 12,
            textAlign: 'center',
            stroke: 'black'
          }
        });

        group.addShape('text', {
          attrs: {
            x: 45,
            y: 70,
            text: model.account.create_time,
            fontFamily: 'Microsoft YaHei',
            fontSize: 12,
            textAlign: 'center',
            stroke: 'black'
          }
        });

        group.addShape('text', {
          attrs: {
            x: 45,
            y: 95,
            text: model.account.team,
            fontFamily: 'Microsoft YaHei',
            fontSize: 12,
            textAlign: 'center',
            stroke: 'black'
          }
        });

        return group.addShape('rect', {
          attrs: {
            x: 0,
            y: 0,
            width: lineAttrs.x2,
            height: 100,
            stroke: '#91ADD7'
          }
        });
      }
    });

    var layout = new G6.Layouts.CompactBoxTree({
      direction: 'TB',
      getHGap: function() {
        return 15;
      },
      getVGap: function() {
        return 10;
      }
    });

    var tree = new G6.Tree({
      container: 'mountNode',
      fitView: 'tc',
      layout,
      height: window.innerHeight
    });

    tree.read({
      roots: [{
				account: {
					user_code: '00001',
					user_level: '正式会员',
					create_time: '999999',
					team: '总:99999	直推:99999'
				},
        shape: 'rectangle',
        children: [{
					account: {
						user_code: '00011',
						user_level: '正式会员',
						create_time: '999999',
						team: '总:99999	直推:99999'
					},
          shape: 'rectangle',
          children: [{
            account: {
            	user_code: '00111',
            	user_level: '正式会员',
            	create_time: '999999',
            	team: '总:99999	直推:99999'
            },
            shape: 'rectangle',
            children: [{
              account: {
              	user_code: '01111',
              	user_level: '正式会员',
              	create_time: '999999',
              	team: '总:99999	直推:99999'
              },
              shape: 'rectangle',
            }, {
              account: {
              	user_code: '01112',
              	user_level: '正式会员',
              	create_time: '999999',
              	team: '总:99999	直推:99999'
              },
              shape: 'rectangle',
            }]
          }, {
            account: {
            	user_code: '00112',
            	user_level: '正式会员',
            	create_time: '999999',
            	team: '总:99999	直推:99999'
            },
            shape: 'rectangle',
						children: [{
							account: {
								user_code: '01121',
								user_level: '正式会员',
								create_time: '999999',
								team: '总:99999	直推:99999'
							},
							shape: 'rectangle'
						}, {
							account: {
								user_code: '01122',
								user_level: '正式会员',
								create_time: '999999',
								team: '总:99999	直推:99999'
							},
							shape: 'rectangle'
						}]
          }]
        }, {
          account: {
          	user_code: '00012',
          	user_level: '正式会员',
          	create_time: '999999',
          	team: '总:99999	直推:99999'
          },
          shape: 'rectangle',
          children: [{
            account: {
            	user_code: '00121',
            	user_level: '正式会员',
            	create_time: '999999',
            	team: '总:99999	直推:99999'
            },
            shape: 'rectangle',
						children: [{
							account: {
								user_code: '01211',
								user_level: '正式会员',
								create_time: '999999',
								team: '总:99999	直推:99999'
							},
							shape: 'rectangle'
						}, {
							account: {
								user_code: '01212',
								user_level: '正式会员',
								create_time: '999999',
								team: '总:99999	直推:99999'
							},
							shape: 'rectangle'
						}]
          }, {
            account: {
            	user_code: '00122',
            	user_level: '正式会员',
            	create_time: '999999',
            	team: '总:99999	直推:99999'
            },
            shape: 'rectangle',
						children: [{
							account: {
								user_code: '01221',
								user_level: '正式会员',
								create_time: '999999',
								team: '总:99999	直推:99999'
							},
							shape: 'rectangle'
						}, {
							account: {
								user_code: '01222',
								user_level: '正式会员',
								create_time: '999999',
								team: '总:99999	直推:99999'
							},
							shape: 'rectangle'
						}]
          }]
        }] 
      }]
    });
  });
</script>